﻿@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}
<style type="text/css">
    .form {
        padding: 5px;
    }

    .form_elem {
        display: block;
    }

        .form_elem .row {
            padding: 5px 0;
        }

</style>

<div data-options="region:'north'" class="form">
    <form class="form_elem">

        @* <div>
        表名：<input id="tableName" name="tableName" class="easyui-combobox">
        字段：<input id="filed" name="filed" class="easyui-combogrid">
        条件：<input id="condition" name="condition" class="easyui-combobox">
        值：<input id="value" name="value" class="easyui-textbox">
        </div>*@
        <div id="form"> </div>
        <div>
            <button type="button" onclick="_add()" id="add" class="easyui-linkbutton" data-options="iconCls:'icon-add'"></button>
            @*<button type="button" id="add" class="easyui-linkbutton" data-options="iconCls:'icon-remove'"></button>*@
            <button type="button" id="search" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</button>
            <button type="button" id="clear" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">清空</button>
        </div>
    </form>

</div>
<br>
<br>
<br>
<br>
<div data-options="region:'center'">
    <table id="dg"></table>
</div>

@section Scripts{
    <script type="text/javascript">

        var row_id = 0; // 行数
        var tablesData = {}; //
        const renderHtml = (id) => {
            const _html = `<div class="row" id="row_${row_id}" data-id="${row_id}">
                     表名：<input id="tableName_${row_id}" data-id="${row_id}" name="tableName" class="easyui-combobox">
                     字段：<input id="filed_${row_id}" data-id="${row_id}" name="filed" class="easyui-combogrid">
                     条件：<input id="condition_${row_id}" data-id="${row_id}" name="condition" class="easyui-combobox">
                     值：
                      <input id="valueBox_${row_id}" data-id="${row_id}" name="value">
                      <input id="valueBox_${row_id}_2" data-id="${row_id}" name="value">
             </div>
                                                                            `;
            $(id).append(_html);
            $(`#tableName_${row_id}`).combobox({
                url: '/api/ExpressionApplication/GetTables',
                valueField: 'id',
                textField: 'text',
                onSelect: function (record) {
                    let id = $(`#tableName_${row_id}`).attr('data-id');
                    filed(record.text, `#filed_${id}`, `#tableName_${id}`)
                },
                onLoadSuccess: function () {
                    var tableNams = $(`#tableName_${row_id}`).combobox('getData');//获取所有下拉框数据
                    if (tableNams.length > 0) {
                        //如果有数据的话默认选中第一条数据
                        let id = $(`#tableName_${row_id}`).attr('data-id');
                        $(`#tableName_${id}`).combobox('select', tableNams[0].text);
                        filed(tableNams[0].text, `#filed_${id}`, `#tableName_${id}`);
                    }
                }
            });
        };
        renderHtml('#form');
        const _add = () => {
            row_id++;
            const _html = `<div></div>`;
            renderHtml('#form')
        }


        $(function () {
            $('#tableName').combobox({
                url: '/api/ExpressionApplication/GetTables',
                valueField: 'id',
                textField: 'text',
                onSelect: function (record) {
                    filed(record.text);
                },
                onLoadSuccess: function () {
                    var tableNams = $('#tableName').combobox('getData');//获取所有下拉框数据
                    if (tableNams.length > 0) {
                        //如果有数据的话默认选中第一条数据
                        $('#tableName').combobox('select', tableNams[0].text);
                        filed(tableNams[0].text);
                    }
                }
            });
        });

        //字段处理
        function filed(parameter, filedId, tableId) {
            $(filedId).combogrid({
                panelWidth: 450,
                //value: '006',
                idField: 'propertyTypeName',
                textField: 'propertyName',
                url: '/api/ExpressionApplication/GetTablePropertystring?tableName=' + parameter,
                columns: [[
                    { field: 'propertyName', title: '属性名称', width: 100 },
                    { field: 'propertyTypeName', title: '属性类型', width: 100 },
                    { field: 'propertySummary', title: '属性备注', width: 100 }
                ]],
                onSelect: function (record) {
                    var tableName = $(tableId).combobox('getText');
                    var fileds = $(filedId).combogrid('grid').datagrid('getData');//获取所有下拉框数据
                    var { propertyName, propertyTypeName } = fileds.rows[record];
                    let id = $(filedId).attr('data-id');
                    condition(tableName, propertyName, `#condition_${id}`);
                    renderValue(propertyTypeName, `#valueBox_${id}`);
                },
                onLoadSuccess: function () {
                    var fileds = $(filedId).combogrid('grid').datagrid('getData');//获取所有下拉框数据
                    if (fileds.rows.length > 0) {
                        //如果有数据的话默认选中第一条数据
                        $(filedId).combogrid('setValue', fileds.rows[0].propertyName);
                        var tableName = $(tableId).combobox('getText');
                        var { propertyName, propertyTypeName } = fileds.rows[0];
                        let id = $(filedId).attr('data-id');
                        condition(tableName, propertyName, `#condition_${id}`);
                        renderValue(propertyTypeName, `#valueBox_${id}`);
                    }
                }
            });
        }
        function renderValue(propertyTypeName, id) {
            $(id).textbox();
        }



        //条件处理
        function condition(tableName, propertyName, conditionId) {
            $(conditionId).combobox({
                url: '/api/ExpressionApplication/GetTablePropertyInfos?tableName=' + tableName + '&propertyName=' + propertyName,
                valueField: 'id',
                textField: 'name',
                onSelect: function (record) {
                    let id = $(conditionId).attr('data-id');
                    if (record.name == 'Between') {
                        if (!document.getElementById(`valueBox_${id}_2`)) {
                            let _html = `<input id="valueBox_${id}_2" data-id="${id}" name="value">`;
                            $(`#row_${id}`).append(_html);
                        }
                        $(`#valueBox_${id}_2`).textbox();
                    } else {
                        if (document.getElementById(`valueBox_${id}_2`)) {
                            $(`#valueBox_${id}_2`).textbox('destroy');
                        }
                    }
                },
                onLoadSuccess: function () {
                    var conditions = $(conditionId).combobox('getData');//获取所有下拉框数据
                    if (conditions.length > 0) {
                        //如果有数据的话默认选中第一条数据
                        $(conditionId).combobox('select', conditions[0].name);
                    }
                }
            });
        }


        $("#search").click(function () {
            var objList = {};
            var expressionBuilders = [];
            for (let i = 0; i <= row_id; i++) {
                var obj = {};
                obj[`TableName`] = $(`#tableName_${i}`).combobox('getText');
                obj["PropertyName"] = $(`#filed_${i}`).combogrid('getText');
                obj["Condition"] = $(`#condition_${i}`).combobox('getText');
                obj["Value1"] = $(`#valueBox_${i}`).textbox('getText');
                if (document.getElementById(`valueBox_${i}_2`)) {
                    obj["Value2"] = $(`#valueBox_${i}_2`).textbox('getText');
                } else {
                    obj["Value2"] = "";
                }
                expressionBuilders[i] = obj;
            }
            objList.ExpressionBuilders = expressionBuilders;
            console.log({ objList })

            $("#dg").datagrid("reload", objList);
            //datagridFunction(obj);
            return false;
        });

        $("#clear").click(function () {
            $(".form_elem .easyui-textbox").textbox("clear");
            $(".form_elem select").combobox("clear");
            return false;
        });




        var columns = [[
            { title: '全选', field: 'ck', checkbox: true, sortable: false, width: 100 },  //添加checkbox
            { field: 'id', title: '主键 (Product.ID) ', width: 100, /*hidden: true*/ },
            { field: 'productName', title: '产品名称(Product.ProductName) ', width: 100 },
            { field: 'colorName', title: '色号名称(ProductColor.ColorName)', width: 100 },
            { field: 'colorDesc', title: '色号描述(ProductColor.ColorDesc)', width: 100 },
            { field: 'createDate', title: '产品创建时间(Product.CreateTime)', width: 100 },
        ]];


        var toolbar = [{
            iconCls: 'icon-edit',
            text: '修改',
            handler: function () {

            }
        }, '-', {
            iconCls: 'icon-add',
            text: '增加',
            handler: function () {

            }
        }, '-', {
            iconCls: 'icon-remove',
            text: '删除',
            handler: function () {

            }
        }];



        $('#dg').datagrid({
            url: '/api/ExpressionApplication/GetProductView',
            columns: columns,
            //height: 'auto',
            //data: dataJson,
            method: 'post',
            //queryParams: queryParams,
            striped: true, //设置为 true，则把行条纹化。（即奇偶行使用不同背景色）
            //toolbar: toolbar,
            fitColumns: true,
            idField: "ID",
            singleSelect: true, //设置为 true，则只允许选中一行。
            rownumbers: true,//设置为 true，则显示带有行号的列
            checkbox: true, //设置为 true，则显示复选框
            checkOnSelect: true, //如果设置为 true，当用户点击某一行时，则会选中/ 取消选中复选框checkbox
            loadMsg: "正在加载数据中...",
            pagination: true,//分页控件
            rownumbers: true,
            pageSize: 5,
            pageList: [5, 10, 20],
            onDblClickCell: function (index, field, value) {
                $('#dg').editRow(index);
            }
        });



        //当分页时运行
        var pager = $("#dg").datagrid("getPager");
        pager.pagination({
            beforePageText: '第',//页数文本框前显示的汉字
            afterPageText: '页    共 {pages} 页',
            displayMsg: '第{from}到{to}条，共{total}条',
        });

    </script>
}